<template>
    <div class="comment-list">
        <!-- 在created()里手动触发了onLoad,所以:immediate-check="false" 表示在初始化时不立即执行滚动位置检查-->
        <van-list 
            :immediate-check="false"
            v-model="loading" 
            :finished="finished" 
            finished-text="没有更多了" 
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            @load="onLoad">
            <!-- 封装评论列表项 -->
            <CommentItem 
                v-for="comment in commentList" 
                :key="comment.com_id" 
                :type="type"
                :comment="comment" 
                @replyClick="$emit('replyClick', $event)">
            </CommentItem>
        </van-list>
    </div>
</template>

<script>
import { getComments } from '@/api/comment'
import CommentItem from '@/components/comment-item'

export default {
    name: 'CommentList',
    components: {
        CommentItem
    },
    props: {
        type: {
            type: String,
            required: true
        },
        source: {
            type: [Number, String],
            required: true
        },
        commentList: {
            type: Array,
            // 默认值为一个空数组
            default: () => []
        }
    },
    data() {

        return {
            // commentList: [], //评论列表
            loading: false, // 控制加载状态
            loadCounts: 0, //记录加载的次数
            finished: false, // 加载结束的标志
            error: false, //控制加载失败的提示状态
            offset: null // 值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
        };
    },
    methods: {
        // 加载评论列表
        onLoad() {
            getComments({
                type: this.type, //评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
                source: this.source, //源id，文章id或评论id
                offset: this.offset, //值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
                limit: 10 //每次获取的评论个数
            }).then(({ data }) => {
                console.log(data)
                const results = data.data.results
                this.commentList.push(...results)
                this.loadCounts++
                // 向父组件传递评论条数
                if(this.loadCounts === 1) {
                    this.$emit('getCommentsCount', data.data.total_count)
                }
                //1 加载状态结束
                this.loading = false;
                // 2 判断数据是否全部加载完成
                if (results.length) {
                    // 有数据,则更新获取下一页
                    this.offset = data.data.last_id
                } else {
                    // 没有数据了，将 finished 设为 true;
                    this.finished = true
                }
            }).catch((err) => {
                console.log('加载评论失败', err)
                this.loading = false;
                this.error = true
            })
        }
    },
    created() {
        // 项目设计有问题，文章对象里获取到的评论数与实际不符，所以只能通过评论列表获取
        // 所以在文章详情界面，当评论列表内容还未可视化时，我们需要手动触发一次onLoad，让$emit事件（72行）发出
        // 手动触发的onLoad需要先手动设置loading为true
        this.loading = true
        this.onLoad()
    }
}
</script>

<style lang="less" scoped></style>